<template>
  <div class="mapContent">
    <div>
      <p>地图层级：{{ mapZoom }}</p>
      <p>地图中心：{{ mapCenterText }}</p>
    </div>
    <div id="amapcontainer" style="width: 800px; height: 600px"></div>
  </div>
</template>
  
  <script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "12243cde604bb8819a3b6afd7488c0f7", // '「申请的安全密钥」',
};
export default {
  name: "MapComponents",
  data() {
    return {
      zoom: 11, //初始化地图层级
      center: [116.397428, 39.90923],
      map: null,
      mapCenterText: "",
      mapZoom: "",
      geolocation: null,
    };
  },
  mounted() {
    //初始化地图
    this.initAMap();
  },
  methods: {
    //初始化地图
    initAMap() {
      AMapLoader.load({
        key: "0afa48ee9c0df7d0d0661f738f5e088d", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Scale",
          "AMap.ToolBar",
          "AMap.ControlBar",
          "AMap.Geocoder",
          "AMap.Marker",
          "AMap.CitySearch",
          "AMap.Geolocation",
          "AMap.AutoComplete",
          "AMap.InfoWindow",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          const _this = this;
          // 获取到作为地图容器的DOM元素，创建地图实例
          _this.map = new AMap.Map("amapcontainer", {
            //设置地图容器id
            resizeEnable: true,
            zoom: _this.zoom, // 地图显示的缩放级别
            viewMode: "2D", // 使用3D视图
            zoomEnable: true, // 地图是否可缩放，默认值为true
            dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
            doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
            center: _this.center, // 初始化中心点坐标 广州
            // mapStyle: "amap://styles/darkblue", // 设置颜色底层
          });
          _this.getCurrentLocation();
          _this.map.addControl(new AMap.Scale()); // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          _this.map.addControl(new AMap.ToolBar()); //在图面添加鹰眼控件，在地图右下角显示地图的缩略图
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //获取当前定位
    getCurrentLocation() {
      const that = this;
      that.geolocation = new window.AMap.Geolocation({
        timeout: 3000, //超过3秒后停止定位，默认：5s
        enableHighAccuracy: true,
        zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
      });
      that.geolocation.getCurrentPosition(function (status, result) {
        //备注：getCurrentPosition方法会调用超时或失败：
        //Get geolocation time out：浏览器定位超时，包括原生的超时，可以适当增加超时属性的设定值以减少这一现象。
        //另外还有个别浏览器（如google Chrome浏览器等）本身的定位接口是黑洞，通过其请求定位完全没有回应，也会超时返回失败。
        //Get geolocation failed：定位失败，Chrome、火狐以及部分套壳浏览器接入的定位服务在国外，有较大限制，失败率高。
        this.mapCenterText = result;
        console.log(status, result);
        if (status == "complete") {
          that.onComplete(result);
        } else {
          that.onError(result); //失败后可使用getCityInfo获取非精准定位（具体到省市）
        }
      });
    },
    //解析定位错误信息
    onError(data) {
      console.log(data);
      this.getLngLatLocation();
    },
    //在获取具体定位失败时调用的代码：（非精准定位！！！）
    getLngLatLocation() {
      const that = this;
      that.geolocation.getCityInfo(function (status, result) {
        if (status === "complete") {
          let data = result.position;
          that.address = result.province + result.city;
          that.showLocation(data);
        } else {
          that.$message.error("获取地址失败");
        }
      });
    },
    //新增标记
    showLocation(data) {
      let marker = new window.AMap.Marker({
        position: new window.AMap.LngLat(data[0], data[1]), //参数为经纬度
      });
      this.map.clearMap(); // 清除所有覆盖物（点标志）
      this.map.add(marker); // 添加点标志
      this.showInfoWindow(marker); //自定义信息窗体
    },
    //自定义信息窗体
    showInfoWindow(marker) {
      let infoWindow = new window.AMap.InfoWindow({
        isCustom: true, //是否自定义信息窗体
        content: `<div style="background-color: white;padding: 0 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${this.address}</div>`,
        closeWhenClickMap: true,
        zIndex: 999,
        offset: new window.AMap.Pixel(16, -35),
      });
      infoWindow.open(this.map, marker.getPosition());
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mapContent {
  font-size: 13px;
}
</style>
  